<template>
  <div id="app">
    <header class="head">
      <a class="back tl" @click="clickmodl">
        <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:;" class="tc">
        <small class="font_18 co_f">原料类别</small>
      </a>
      <a class="complete" @click="peopleClick()">
        完成
      </a>
    </header>
    <main>
      <!-- <div class="seachfrom">
        <div class="seachbox">
          <el-input placeholder="请输入内容" v-model="seachtext">
            <el-button slot="append" icon="search"  @click="seach()"></el-button>
          </el-input>
        </div>
      </div> -->
      <div>
      <ul class="datalist">
        <li v-for='item of listData' :key='item.unid'>
         <!-- <span>
           {{item.name}}--{{item.demandType.name}}
         </span> -->
         <el-checkbox-group v-model="checkList">
            <el-checkbox :label="item.name"></el-checkbox>
          </el-checkbox-group>
         <!-- <el-checkbox  @change="change(item.name,item.unid)"></el-checkbox> -->
        </li>
      </ul>
      </div>
    </main>
  </div>
</template>

<script>
import { DemandWarehouseData } from "../api/api";
export default {
  data() {
    return {
      checkList:[],
      multipleSelection: [],
      PageSize: 0,
      CriteriaList: [],
      listData: [],
      Enterprise: {},
      seachtext: ""
    };
  },
  created() {
  },
  methods: {
    getData: function() {
      let options = {
        params: {
          names: "",
          currentPage: 1,
          pageSize: 10
        }
      };
      //调取接口
      DemandWarehouseData(options).then(res => {
        if (res.success === true) {
          this.user = res.data.user;
          this.listData = res.data;
        }
      });
    },

    peopleClick: function() {
     let multipleSelection = this.checkList;
     var strings=multipleSelection.join()
      this.$emit("listenToChildEvent",multipleSelection,strings);
    },
    clickmodl: function() {
      this.$emit("listencloseclick");
    }
  },
  //页面加载时候
  mounted() {
    this.getData();
    //监听滚动
  }
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
//头部
body {
  background: #f0f0f0;
}

a {
  list-style: none;
  text-decoration: none;
}

header {
  width: 100%;
  height: 45px;
}

.head {
  background: #008c3f;
  color: #fff;
  line-height: 45px;
  text-align: center;
  font-size: 1.2rem;
  position: relative;
}

header .head a:nth-child(2) {
  width: 100%;
}

.font_18 {
  font-size: 18px;
}

.co_f {
  color: #fff !important;
}

.back {
  position: absolute;
  top: 0px;
  left: 0px;
  i {
    color: #fff;
    vertical-align: middle;
    margin-left: 5px;
  }
}
.adds {
  position: absolute;
  top: 0px;
  right: 0px;
  i {
    color: #fff;
    vertical-align: middle;
    margin-right: 5px;
  }
}
//seachfrom
.seachfrom {
  background: #f5f5f5;
  padding: 10px 15px;
}

//list_box
.datalist {
  width: 100%;
}

.datalist li {
  border-bottom: 1px solid #d4d4d4;
  padding: 10px;
}
.datalist li a {
  display: block;
}

.items-img {
  width: 50px;
  height: 50px;
  display: block;
  display: inline-block;
  float: left;
  margin-top: 7px;
}

.items-img img {
  width: 100%;
  height: 100%;
}

.items-text {
  margin-left: 60px;
  font-size: 12px;
}

.items-text p {
  margin: 0px;
}
.complete{
      color: #fff;
    position: absolute;
    right: 10px;
    font-size: 16px;
}
</style>
